<template>
  <view class="msg-content page" style="position: relative;padding: 100rpx 0 100rpx">
    <TopTab tab-index="0" :tabs="['未读','已读']" @change="tabChange"></TopTab>
    <mescroll-body
        ref="mescrollRef"
        @init="mescrollInit"
        :down="downOption"
        @down="downCallback"
        @up="upCallback"
    >
      <view class="message" v-for="(item,index) in dataList" :key="index">
        <view class="msg_type">
          <text>消息类型</text>
          <text style="color: red;">未读</text>
        </view>
        <view class="msg_con">
          <view class="">
            消息标题
          </view>
          <view class="">
            消息内容
          </view>
          <view>
            通知时间：2020年05月12日 15:25:30
          </view>
        </view>
        <view class="msg_info">
          <text>详情</text>
          <u-icon name="arrow-right" color="#999999" size="24"></u-icon>
        </view>
      </view>
    </mescroll-body>

  </view>
</template>

<script>
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";

export default {
  mixins: [MescrollMixin], // 使用mixin
  data() {
    return {
      tabIndex: 0,
      dataList: [],
      queryParams: {},
      downOption: {
        page: {
          num: 0,
          size: 10,
          time: null,
        },
        auto: false, //是否在初始化后,自动执行downCallback; 默认true
      },
    };
  },
  created() {
  },
  methods: {
    downCallback(page) {
      this.dataList = []
      this.mescroll.resetUpScroll()
    },
    upCallback(page) {
      this.getData(page)
    },
    getData(page) {
      this.apis.commonApi.getMsgList({
        pageNum: page.num,
        pageSize: page.size,
        readStatus: this.queryParams.readStatus,
        userId: ''
      }).then((res) => {
        this.dataList = this.dataList.concat(res.rows);
        this.mescroll.endBySize(res.rows.length, res.total);
      }).catch(() => {
        this.mescroll.endErr();
      })
    },
    tabChange(e) {
      this.queryParams.readStatus = e
      this.downCallback()
      this.mescroll.scrollTo(0, 0)
    }
  }
}
</script>

<style lang="scss">
.msg-content {
  font-size: 26rpx;
  color: #333333;

  .message {
    padding: 30rpx 30rpx 0;
    box-sizing: border-box;
    background: #FFFFFF;
    border-radius: 12rpx;
    margin-bottom: 20rpx;


    .msg_type {
      border-bottom: 1rpx solid #F6F6F6;
      box-sizing: border-box;
      padding-bottom: 30rpx;
      display: flex;
      justify-content: space-between;
    }

    .msg_con {
      padding: 30rpx 0 0;
      border-bottom: 1rpx solid #F6F6F6;

      view {
        margin-bottom: 20rpx;
      }

      view:nth-child(1) {
        font-size: 32rpx;
        color: #222222;
      }
    }

    .msg_info {
      display: flex;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 30rpx 0;
    }
  }
}
</style>
